<template lang="">
  <div>
    <div class="flow_path">
      <div class="flow_path_one">
        <p class="flow_path_p">一键委托轻易交易，全程顾问跟踪服务！</p>
        <div style="float: left;width: 180px;height: 220px;margin-left: 20px;">
          <img class="flow_path_img" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u377.png">
          <p style="text-align: center;font-size: 14px;color: grey;">1.免费标的委托</p>
          <p style="text-align: center;font-size: 14px;color: grey;">专业顾问，免费省事</p>
        </div>
        <div style="float:left; margin-top: 90px;">
          <span>------></span>
        </div>
        <div style="float: left;width: 180px;height: 220px;">
          <img class="flow_path_img" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u379.png">
          <p style="text-align: center;font-size: 14px;color: grey;">2.全国竞拍高价</p>
          <p style="text-align: center;font-size: 14px;color: grey;">一货多抢高价胜出</p>
        </div>
        <div style="float:left; margin-top: 90px;">
          <span>------></span>
        </div>
        <div style="float: left;width: 180px;height: 220px;">
          <img class="flow_path_img" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u378.png">
          <p style="text-align: center;font-size: 14px;color: grey;">3.线下付款交割</p>
          <p style="text-align: center;font-size: 14px;color: grey;">管家式协办，专业高效</p>
        </div>
      </div>
      <div style="border:1px solid;float:left;height:250px;margin-top: 25px;color: grey;"></div>
      <div class="flow_path_two">
        <p class="flow_path_two_p">累计服务 9517 名委托客户</p>
        <div class="flow_path_two_phone">
          <span class="flow_path_two_address">无锡</span>
          <i style="float:left;margin-top: 25px;margin-right: 20px;" class="el-icon-arrow-down el-icon--right"></i>
          <div style="border:1px solid;float:left;height:43px;color: grey;margin-top: 10px;"></div>
          <input style="margin-left:20px;height: 55px;width:220px;outline-style: none;
          outline-color: invert;outline-width: 0px;border-style: none;
          text-shadow: none;outline-color: transparent;box-shadow: none;"
          type="text" placeholder="请输入您的手机号" v-model="phone" maxlength="11"/>
          <img style="width: 20px;height:20px;float: right;margin-top: 21px;margin-right: 40px;margin-left: -14px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u402.png">
          <div style="float: right;font-size: 14px;width: 80px;height: 63px;line-height: 60px;color: #51A2B2;">隐私保护</div>
        </div>
        <el-button @click="free_commission" style="margin-left: 20px;width: 200px;height: 63px;" type="info"><span style="font-size: 20px;">免费委托</span></el-button>
        <div class="flow_path_two_weituo">
          <span style="margin-right: 64px;">9:36 137***232委托一批物质</span>
          <span style="margin-right: 64px;">9:36 137***232委托一批物质</span>
          <span>9:36 137***232委托一批物质</span>
        </div>
      </div>
      <div style="border:1px solid;float:left;height:250px;margin-top: 25px;color: grey;"></div>
      <div class="flow_path_three">
        <img class="flow_path_three_img" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u599.svg">
        <img class="flow_path_three_head_sculpture" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u600.png">
        <span style="float: left;font-size: 12px;color: grey;margin-left: 72px;margin-top: -70px;">处置废旧物资的福妹</span>
      </div>
    </div>
    <div class="industry_and_region">
      <div class="industry">
        <div class="industry_one">行业</div>
        <div class="industry_two">
          <span class="industry_two_one">不限</span>
          <span class="industry_two_two">二手设备</span>
          <span class="industry_two_two">再生资源</span>
          <span class="industry_two_two">废旧资源</span>
          <span class="industry_two_two">危废</span>
          <span class="industry_two_two">旧货</span>
        </div>
      </div>
      <div class="region">
        <div class="region_one">地区</div>
        <div class="region_two">
          <span class="region_two_one">不限</span><span class="region_two_two">河南</span><span class="region_two_two">北京</span>
          <span class="region_two_two">广东</span><span class="region_two_two">上海</span><span class="region_two_two">陕西</span>
          <span class="region_two_two">山东</span><span class="region_two_two">湖南</span><span class="region_two_two">四川</span>
          <span class="region_two_two">浙江</span><span class="region_two_two">辽宁</span><span class="region_two_two">安徽</span>
          <span class="region_two_two">河北</span><span class="region_two_two">福建</span>
          <span class="region_two_two">江苏</span><span class="region_two_two">湖北</span>
        </div>
      </div>
    </div>
    <div class="commodity">
      <div class="commodity_one">
        <div class="commodity_one_img">
          <img @click="skipAnnouncementDetails" style="width: 264px;height: 280px;" src="https://img0.baidu.com/it/u=3269267781,3456683836&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=742">
        </div>
        <div class="commodity_one_information">
          <div class="commodity_one_information_one">
            公告名称显示25支付公告名称显示25字符公告名称显示25支付公告名称显示25字符
          </div>
          <div class="commodity_one_information_two">
            受委托。于2019年4月28日10点至2019年4月29日11点止(延时的除外)在富宝旗下资产处置平台(网址:http://zichan.f139.com/)进行公开转卖，现将有关事项公告如下：
          </div>
          <div class="commodity_one_information_three">
            <div>看货时间:2019/3/27-2019/4/25</div>
            <div style="margin-top: 20px;width: 200px;float: left;">江苏 无锡</div>
            <img class="huo" src="../assets/huo.png">
            <div style="width: 40px;float: left;margin-top: 20px;">1121</div>
          </div>
        </div>
      </div>
      <div class="commodity_two">
        <div class="commodity_one_img">
          <img style="width: 264px;height: 280px;" src="https://img2.baidu.com/it/u=1558380218,3035374757&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=752">
        </div>
        <div class="commodity_one_information">
          <div class="commodity_one_information_one">
            公告名称显示25支付公告名称显示25字符公告名称显示25支付公告名称显示25字符
          </div>
          <div class="commodity_one_information_two">
            受委托。于2019年4月28日10点至2019年4月29日11点止(延时的除外)在富宝旗下资产处置平台(网址:http://zichan.f139.com/)进行公开转卖，现将有关事项公告如下：
          </div>
          <div class="commodity_one_information_three">
            <div>看货时间:2019/3/27-2019/4/25</div>
            <div style="margin-top: 20px;width: 200px;float: left;">江苏 无锡</div>
            <img class="huo" src="../assets/huo.png">
            <div style="width: 40px;float: left;margin-top: 20px;">1121</div>
          </div>
        </div>
      </div>
      <div class="commodity_three">
        <div class="commodity_one_img">
          <img style="width: 264px;height: 280px;" src="https://img2.baidu.com/it/u=2936886835,2677345904&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500">
        </div>
        <div class="commodity_one_information">
          <div class="commodity_one_information_one">
            公告名称显示25支付公告名称显示25字符公告名称显示25支付公告名称显示25字符
          </div>
          <div class="commodity_one_information_two">
            受委托。于2019年4月28日10点至2019年4月29日11点止(延时的除外)在富宝旗下资产处置平台(网址:http://zichan.f139.com/)进行公开转卖，现将有关事项公告如下：
          </div>
          <div class="commodity_one_information_three">
            <div>看货时间:2019/3/27-2019/4/25</div>
            <div style="margin-top: 20px;width: 200px;float: left;">江苏 无锡</div>
            <img class="huo" src="../assets/huo.png">
            <div style="width: 40px;float: left;margin-top: 20px;">1121</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="3"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" style="margin-top: 20px;float: left;">
    </el-pagination>
    <el-dialog
      title="免费委托"
      :visible.sync="dialogVisible"
      width="30%">
      <div style="width: 531px;height: 470px;">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="联系人">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="图形验证">
            <el-col :span="16">
              <el-input v-model="form.name"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button style="width: 140px;margin-left: 10px;">6SPD</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="短信验证">
            <el-col :span="16">
              <el-input v-model="form.name"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="info" style="width: 140px;margin-left: 10px;">获取验证码</el-button>
            </el-col>
          </el-form-item>
          <el-form-item label="标的名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-top: 40px;margin-left: 120px;width: 160px;height: 45px;" type="info" @click="dialogVisible = false">免费委托</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      title="免费委托"
      :visible.sync="dialogVisible1"
      width="30%">
      <div style="width: 531px;height: 220px;">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标的名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-top: 40px;margin-left: 120px;width: 160px;height: 45px;" type="info" @click="dialogVisible = false">免费委托</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <div class="QR_code">
      <div class="QR_code_one">
        <div style="width: 40%;height: 200px;margin-left: 10%;float: left;">
          <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u561.svg">
          <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信服务号</div>
          <span style="margin-left: -87px;margin-top: 100px;float: left;font-size: 14px;">一手消息随时掌握</span>
        </div>
        <div style="width: 40%;height: 200px;float: left;margin-left: 10%;">
          <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u564.svg">
          <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信小程序</div>
          <span style="margin-left: -87px;margin-top: 100px;float: left;font-size: 14px;">随时随地交易</span>
        </div>
      </div>
      <div class="QR_code_two">
        <p style="margin-top: 47px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="margin-right: 50px;font-size: 14px;">增值电信业务经营许可证沪B</span>
          <span style="font-size: 14px;">全国免费服务热线：400-886-0000</span>
        </p>
        <p style="margin-top: 30px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="font-size: 14px;">增值电信业务经营许可证沪B</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      phone: '', // 手机号
      dialogVisible1: false, // 登录后点击免费委托出现的弹窗
      dialogVisible: false, // 登录前点击免费委托出现的弹窗
      form: {},
      currentPage4: 1, // 分页显示第几页
      pageRequest: { // 分页请求参数
        pageSize: 6, // 每页条数
        pageNum: 1 // 每页数量
      },
      total: 0 // 分页总条数
    }
  },
  mounted () {

  },
  methods: {
    skipAnnouncementDetails () { // 跳转公告详情页面
      this.$router.push('/announcementDetails')
    },
    free_commission () { // 免费委托弹窗方法
      // 手机格式验证
      const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (this.phone !== '' && regMobile.test(this.phone)) {
        this.dialogVisible1 = true
      } else {
        this.myMessage('warning', '手机号为空或手机号格式不正确')
      }
    },
    handleSizeChange (val) { // 改变每页条数
      this.pageRequest.pageSize = val
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageRequest.pageNum = val
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .QR_code_two{
    float: left;
    width: 50%;
    height: 200px;
  }
  .QR_code_one{
    float: left;
    width: 50%;
    height: 200px;
  }
  .QR_code{
    margin-top: 50px;
    float: left;
    width: 100%;
    height: 240px;
  }
  .huo{
    margin-top: 19px;
    float: left;
    width: 20px;
  }
  .commodity_one_information_three{
    width: 310px;
    height: 80px;
    font-size: 14px;
    color: grey;
  }
  .commodity_one_information_two{
    width: 310px;
    height: 120px;
    font-size: 14px;
    color: grey;
  }
  .commodity_one_information_one{
    width: 310px;
    height: 80px;
    font-size: 14px;
  }
  .commodity_one_information{
    margin-top: 10px;
    float: left;
    width: 310px;
    height: 280px;
  }
  .commodity_one_img{
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    width: 270px;
    height: 280px;
  }
  .commodity_three{
    float: left;
    width: 614px;
    height: 300px;
    background-color: #fff;
  }
  .commodity_two{
    margin-right: 10px;
    float: left;
    width: 614px;
    height: 300px;
    background-color: #fff;
  }
  .commodity_one{
    margin-right: 10px;
    float: left;
    width: 614px;
    height: 300px;
    background-color: #fff;
  }
  .commodity{
    width: 100%;
  }
  .industry_two_two{
    margin-left: 40px;
  }
  .region_two_two{
    margin-left: 40px;
  }
  .industry_two_one{
    margin-left: 40px;
    color: red;
  }
  .region_two_one{
    margin-left: 40px;
    color: red;
  }
  .industry_two{
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    line-height: 70px;
    float: right;
    width: 1680px;
    height: 70px;
    background-color: #FFFFFF;
  }
  .region_two{
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    line-height: 70px;
    float: right;
    width: 1680px;
    height: 70px;
    background-color: #FFFFFF;
  }
  .industry_one{
    background-color: #F2F2F2;
    border: 1px solid #000;
    text-align: center;
    line-height: 70px;
    float: left;
    width: 180px;
    height: 70px;
  }
  .region_one{
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    text-align: center;
    line-height: 70px;
    float: left;
    width: 180px;
    height: 70px;
    background-color: #F2F2F2;
  }
  .region{
    width: 100%;
    height: 70px;
  }
  .industry{
    width: 100%;
    height: 72px;
  }
  .industry_and_region{
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
    height: 142px;
  }
  .flow_path_three_head_sculpture{
    border-width: 0px;
    position: relative;
    left: 85px;
    top: -117px;
    width: 80px;
    height: 80px;
  }
  .flow_path_three_img{
    margin-left: 50px;
    margin-top: 78px;
    width: 150px;
    height: 150px;
  }
  .flow_path_two_weituo{
    color: grey;
    margin-left: 40px;
    margin-top: 70px;
    width: 800px;
    height: 100px;
  }
  .flow_path_two_address{
    float:left;
    margin-left: 30px;
    width: 50px;
    height: 63px;
    line-height: 63px;
  }
  .flow_path_two_phone{
    float:left;
    margin-left: 40px;
    width: 544px;
    height: 63px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(204, 204, 204, 1);
    border-radius: 7px;
    box-shadow: none;
  }
  .flow_path_img{
    margin-top: 20px;
    margin-left: 50px;
    width: 100px;
    height: 100px;
  }
  .flow_path_two_p{
    font-size: 20px;
    margin-top: 25px;
    margin-left: 60px;
  }
  .flow_path_p{
    font-size: 20px;
    margin-top: 25px;
    margin-left: 40px;
  }
  .flow_path_three{
    float: left;
    height: 300px;
    width: 250px;
  }
  .flow_path_two{
    float: left;
    height: 300px;
    width: 900px;
  }
  .flow_path_one{
    float: left;
    height: 300px;
    width: 700px;
  }
  .flow_path{
    margin-top: 10px;
    width: 100%;
    height: 300px;
    background-color: #fff;
  }
</style>
